var charts = [];
var gauge;
var chartData = {
    chart: {
        renderTo: "bank1-chart",
        type: 'column',
        margin: [ 40, 40, 40, 70],
        backgroundColor: '#3a3a3a',
        events: {
            load: function() {

            }
        }
    },
    title: {
        text: 'Bank 1',
        style: {
            color: '#f0f0f0',
            display: 'none'
        }
    },
    xAxis: {
        categories: [
            '82',
            '83',
            '84',
            '85',
            '86',
            '87',
            '88',
            '89',
            '90',
            '91',
            '92',
            '93',
            '94',
            '95',
            '96',
            '97',
            '98',
            '99'
        ],
        labels: {
            rotation: 0,
            align: 'center',
            style: {
                fontSize: '12px',
                fontFamily: 'Verdana, sans-serif',
                color: '#f0f0f0'
            }
        }
    },
    yAxis: {
        min:3.0,
        max: 3.5,
        title: {
            text: 'Cell voltage [V]',
            style: {
                color: '#f0f0f0'   
            }
        },
        labels: {
            style: {
                color: '#f0f0f0'   
            }
        }
    },
    tooltip: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Cell voltage [V]',
        data: [3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0],
        dataLabels: {
            enabled: false,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            x: 4,
            y: 10,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }],
    plotOptions: {
        series: {
            color: "#0f88c0",
            animation: false
            //pointWidth: 16
        }
    }
};

var gaugeData = {
	
	    chart: {
            renderTo: 'soc-gauge',
	        type: 'gauge',
	        plotBackgroundColor: null,
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false,
            backgroundColor: '#3a3a3a'
	    },
	    
	    pane: {
	        startAngle: -180,
	        endAngle: 90,
	        background: null
	    },

        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false   
                },
                dial: {
                        radius: '90%',
                        backgroundColor: '#0f88c0',
                        borderColor: '#0f88c0',
                        borderWidth: 0,
                        baseWidth: 5,
                        topWidth: 1,
                        baseLength: '50%', // of radius
                        rearLength: '0'
                    }
            }
        },
        
	    // the value axis
	    yAxis: {
	        min: 0,
	        max: 100,
	        
            offset: -20,
            lineColor: null,
            
	        minorTickInterval: 5,
	        minorTickWidth: 1,
	        minorTickLength: 10,
	        minorTickPosition: 'outside',
	        minorTickColor: '#3a3a3a',
	
	        tickPixelInterval: 90,
	        tickWidth: 2,
	        tickPosition: 'outside',
	        tickLength: 20,
	        tickColor: '#3a3a3a',
	        labels: {
	            step: 1,
	            rotation: 'auto',
                align: 'center',
                style: {
                    fontSize: '14px',
                    fontWeight: 'bold',
                    color: '#f0f0f0'
                }
	        },
	        title: {
	            text: 'SOC [%]',
                style: {
                    color: '#f0f0f0',
                    fontSize: '1.2em',
                    display: 'none'
                }
	        },
	        plotBands: [{
	            from: 0,
	            to: 20,
                thickness: 20,
	            color: '#d54d0a' // red                
	        }, {
	            from: 20,
	            to: 50,
                thickness: 20,
	            color: '#feea07' // yellow
	        }, {
	            from: 50,
	            to: 100,
                thickness: 20,
	            color: '#a4e813' // green
	        }]        
	    },
	
	    series: [{
	        name: 'State of charge',
	        data: [44],
	        tooltip: {
	            valueSuffix: ' %'
	        }
	    }]
	
	};

batteryTabDimensions = {
    "div#wrap": {
        width: 1360
    },
    "div.bank-chart": {
        width: 450,
        height: 250
    },
    "div.bank-chart > div": {
        width: 450,
        height: 250
    },
    "div.data-row > div": {
        width: 450,
        height: 150
    },
    "div#banks": {
        left: 450
    },
    "div#banks > img": {
        height: 140,
        'padding-top': 5
    },
    "div#soc": {
        "font-size": 30
    },
    'div#soc h3': {
        'margin-left': 35,
        'margin-top': 10
    },
    "div#soc-gauge": {
        width: 180,
        height: 180,
        top: 0,
        left: 120
    },
    "div#soc-value": {
        width: 130,
        height: 80,
        top: 100,
        left: 233,
        "font-size": 60
    },
    "div#battery-totals": {
        'font-size': 38
    }
};

$(document).ready(function () {
    
    // Scale
    width = document.width;
    height = document.height;
    ratio = width / height;
    originalWidth = 1360;
    originalHeight = 660;
    originalRatio = originalWidth / originalHeight;
    var scale = 1;
    if (ratio > originalRatio)
    {
        // The screen is more wide, use height as the limit
        scale = height / originalHeight;
    }
    else
    {
        // The screen is less wide, use width as the limit
        scale = width / originalWidth;
    }

    
    // Battery tab size
    chartData.chart.width = 450 * scale;
    chartData.chart.height = 250 * scale;
    gaugeData.chart.width = 180 * scale;
    gaugeData.chart.height = 180 * scale;
    
    // Rescale elements
    for (var element in batteryTabDimensions)
    {
        if (batteryTabDimensions.hasOwnProperty(element))
        {
            jElement = $(element);
            for (var rule in batteryTabDimensions[element])
            {
                if (batteryTabDimensions[element].hasOwnProperty(rule))
                {
                    jElement.css(rule, (batteryTabDimensions[element][rule] * scale) + 'px');
                }
            }
        }
    }
    
    // Generate charts
    cellCounter = 0;
    for (i = 1; i <= 6; i++)
    {
        chartData.chart.renderTo = "bank" + i + "-chart";
        cells = (i == 3 || i == 4) ? 18 : 16;
        categories = [];
        data = [];
        for (j = 0; j < cells; j++)
        {
            categories.push(cellCounter++);
            data.push(3.0);
        }
        chartData.xAxis.categories = categories;
        chartData.series[0].data = data;
        charts.push(new Highcharts.Chart(chartData));
    }
    
    //gauge = new Highcharts.Chart(gaugeData);
    
    // set up the updating of the chart each second
//    setInterval(function() {
//        $.each(charts, function(i, chart)
//        {
//            $.each(chart.series[0].points, function (i, point)
//            {
//                point.update(3.0 + Math.random() * 0.5, false);
//            });
//            chart.redraw();
//        });
//    }, 5000);
});








